<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>韧在维达，乐在全家</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=750, maximum-scale=1.0, user-scalable=no"/>
    <link href="./js/app.css" rel="stylesheet">
    <script src="./js/jquery.js"></script>
</head>
<script src="./js/app.js">
</script>
<body style="margin: 0;padding: 0;">



<a href="./last.html">
    <img id="guize-image" src="https://bzweida.oss-cn-beijing.aliyuncs.com/weida/fenxiangtoupiao.png" style="
width: 100%;height: auto;position: absolute;">
</a>
<div style=";flex-direction: column;display: flex;
align-items: center;;;width: 100%;height: 72em;;position: absolute;top: 0;left: 0;z-index: 100;">

    <div style="flex-direction: column;display: flex;
    width: 100%;display: flex;height: 50em;margin-top: 30em">
        <div id="paihang-list" style="
        height: 80%;;width: 100%;overflow-y: scroll;overflow-x: hidden;">

            <div style="height: 1em">

            </div>


         </div>
        <div style="margin-left: 5em;display: flex;
            align-items: center;
            background-image:
            url('https://bzweida.oss-cn-beijing.aliyuncs.com/weida/wodepaiming_b.png');
            background-repeat: no-repeat;
            height: 8em;width: 80%;">
            <div style="margin-left: 1.5em;align-items: center;min-width: 6em;
            margin-top: 1em;display: flex;flex-direction: column;
            height: 6em;justify-content: center">

                <div id="me-paiming" style="font-weight: bold;border-radius: 50%;display: flex;align-items: center;
                justify-content: center;font-size: 1.5em;color: white;
                width: 2em;height: 2em;background-color: #028CEE">
                </div>
                <div style="color: white;font-size: 1.5em">
                </div>

            </div>
            <div id="me-header" style=";margin-left: 1em;width: 6em;height: 6em;;margin-top: 1em;">
                <a id="me-header-a" style="background-color: rebeccapurple;width: 100%;height: 100%">
                    <div style="width: 100%;height: 100%">

                    </div>
                </a>
            </div>
            <div style="color: white;font-size: 1.5em;display: flex;
            flex-direction: column;margin-left: 0.5em;;height: 4em;;margin-top: 1em">
                <div id="me-name" style="text-align: left;flex: 1;display: flex;align-items: center;
                justify-content: flex-start;">
                </div>
                <div  id="me-number" style="text-align: left;flex: 1;display: flex;align-items: center;
                justify-content: flex-start;">
                </div>


            </div>
        </div>
</div>
</div>
<script>

    $(document).ready(function () {

        function getUploadImagePath() {
            return '/static/images/upload/';
        }
        var paihangDom =  $('#paihang-list');
        var cphoe =window.localStorage.phone;
        if(!cphoe){
            window.location.href = './index.html';
            return;
        }
        function initPaihang(datas) {
            for(var i=0;i<datas.length;i++){

//                var paimingImages  = 'https://bzweida.oss-cn-beijing.aliyuncs.com/weida/';
                var paimingImages  = ['first.png','second.png','thred.png'];
                var pimage = '';
                var showNormalPaim = 'flex';
                var imageShow = 'none';
                if(i <= 2){
                    showNormalPaim = 'none';
                    imageShow = 'flex';
                    pimage ='https://bzweida.oss-cn-beijing.aliyuncs.com/weida/'+ paimingImages[i];
                }
                var paimingIndex = i;
                var data = datas[i];
                var phone = data.mobileNumber;
                var im = getUploadImagePath()+phone+'.png';
                if(cphoe == phone){
                    //is me
                    $('#me-name').text('作者:'+data.userName);
                    $('#me-paiming').text(paimingIndex+1);
                    $('#me-number').text('编号:'+data.id);
//                    $('#me-header').attr('src',im);
                    $('#me-header').css('background','url('+im+') no-repeat center center');
                    $('#me-header-a').attr('href',im);


                }
                    var id = data.id;
                    var paihangItem = "<div class='paiming-item' data-phone='"+phone+"' data-idv='"+id+"' style=\"margin-left: 6.2em;display: flex;\n" +
                        "            align-items: center;\n" +
                        "            background-image:\n" +
                        "            url('https://bzweida.oss-cn-beijing.aliyuncs.com/weida/zanyixia_b.png');\n" +
                        "            background-repeat: no-repeat;\n" +
                        "            height: 8em;width: 80%;\">\n" +
                        "                <div style=\";font-size: 20px;font-weight: bold;\n" +
                        "                color: white;\n" +
                        "                display: flex;align-items: center;justify-content: center;width: 3em;height: 3em;\n" +
                        "                ;margin-left: 1.5em;\n" +
                        "                margin-top: -1em\">\n" +
                        "                    <img style=\"width: 100%;display: "+imageShow+";height: 100%\" src=\""+pimage+"\">\n" +
                        "\n" +
                        "     <div  style=';background-color: #028CEE;display: "+showNormalPaim+";align-items: center;justify-content: center;border-radius: 50%;width: 100%;height: 100%;font-size: 1.5em'>"+((paimingIndex+=1))+"</div>               <!--<div  style=\";background-color: #028CEE;display: flex;-->\n" +
                        "                    <!--align-items: center;-->\n" +
                        "                    <!--justify-content: center;border-radius: 50%;-->\n" +
                        "                    <!--width: 100%;height: 100%;font-size: 1.5em\">-->\n" +
                        "                        <!--5-->\n" +
                        "                    <!--</div>-->\n" +
                        "                </div>\n" +
                        "                <div style=\"background: url("+im+") no-repeat center center;margin-left: 1em;\n" +
                        "                width: 5em;height: 5em;;margin-top: -1em\"><a href='"+im+"'><div style='width: 100%;height: 100%'></div></a></div>\n" +
                        "                <div class='paiming-click' data-phone='"+phone+"' data-idv='"+id+"' style=\"width: 15em;;margin-left: 1em;\n" +
                        "                ;height: 5em;font-size: 1.5em;justify-content: space-around;" +
                        "flex-direction: column;;margin-top: -1em;color: white;display: flex\">\n" +
                        "                    <div style='margin-top: 0.5em'>\n" +
                        "                        作者:"+data.userName+"\n" +
                        "                    </div>\n" +
                        "                    <div style='margin-top: -1em'>\n" +
                        "                        编号:"+data.id+"\n" +
                        "                    </div>\n" +
                        "                </div>\n" +
                        "\n" +
                        "            </div>";
                    paihangDom.append(paihangItem);

            }

            $('.paiming-click').on('click',function () {
                var othis = $(this);
                var phone = othis.data('phone');
                var idv = othis.data('idv');
                $.get(api.vote+'?phone='+phone,function (res) {
                    alert(res.message)
                });
            })
        }

        $.get(api.list,function (res) {
            var datas = res.data;
            initPaihang(datas);
        });
//        var test = [{phone:1356414544,id:11},{phone:135456,id:12},{phone:886444,id:14}];

    })

</script>
</body>


</html>
